<template>
  <div>
    <t-dialog
      position="right"
      :maximized="true"
      ref="drawer"
      style="max-width: 100%;background-color: rgba(0,0,0,0);"
      :show="visible"
      direction="rtl"
      class="demo-drawer portal_topic RtAddPortletHelper"
    >
    <div :style="($q.screen.xs || $q.platform.is.mobile) ? 'width:100vw' : 'width: 400px'">
      <div class="header">
        <p class="title" ref="title">
          {{ title }}
        </p>
        <p class="operate">
          <i class="el-icon-close" @click="close"></i>
        </p>
      </div>
      <div
        class="content"
        style="padding: 0 20px 20px 20px"
        :style="{ paddingBottom: isSearching ? '0' : '20px' }"
      >
        <!-- 搜索 -->
        <div class="content" >
            <!-- 搜索 -->
            <div class="searchs">
              <i class="el-icon-search fas dx-icon icon-t-zoom"></i>
              <input
                type="text"
                placeholder="请输入业务主题名称"
                v-model="searchInput"
              />
              <i
                v-show="searchInput"
                class="fas dx-icon icon-t-close-circle"
                @click="searchInput = ''"
                style="margin-right: 10px; cursor: pointer"
              ></i>
              <i
                v-show="!searchInput"
                class="fas dx-icon icon-t-close-circle"
                style="margin-right: 10px; cursor: pointer; opacity: 0"
              ></i>
            </div>
          </div>
        <div
          separator-class="el-icon-arrow-right"
          v-if="!isSearching"
        >

            <span
            v-for="(i, index) in breadcrumb" :key="index"
              :class="index == breadcrumb.length - 1 ? '' : 'breadcrumb'"
              @click="clickBreadcrumb(i, index)"
            >
              {{ i.Name }} <span style="padding:0 4px" v-if="index!=breadcrumb.length-1">{{ index!=breadcrumb.length-1?'>':'' }}</span>
            </span>

        </div>
      </div>
      <p class="line" v-if="!isSearching"></p>
      <div
        width="100%"
        :style="isSearching ? 'height:calc(100vh - 160px)' : 'height:calc(100vh - 206px)'"
      >
        <div class="tree" v-if="!isSearching">
          <p v-for="i in TreeData.children" class="topic">

          <t-radio
            v-model="topicID"
            :val="i[Id]"
              :label="i.Name"
           
              :ref="i[Id].replace(/-/gi, '')"
              size="xs"
            >
            
            </t-radio>
    
              <span
                v-if="i.children"
                @mousedown.stop.prevent="() => {}"
                @click.stop.prevent="nextStep(i)"
              >
                <svg
                  fill="var(--t-color)"
                  t="1694596021408"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="8875"
                  width="14"
                  height="14"
                >
                  <path
                    d="M986.040139 1024H607.160139a38.365867 38.365867 0 0 1-38.2976-38.229333v-56.1152H180.834806a38.365867 38.365867 0 0 1-38.229334-38.229334V313.685333H38.498806A38.365867 38.365867 0 0 1 0.269472 275.456V38.229333A38.365867 38.365867 0 0 1 38.498806 0h520.669866a38.365867 38.365867 0 0 1 38.229334 38.229333v236.612267a38.365867 38.365867 0 0 1-38.229334 38.229333H219.064139v160.1536h349.252267V417.109333a38.365867 38.365867 0 0 1 38.229333-38.2976h378.88a38.365867 38.365867 0 0 1 38.2976 38.229334v189.2352a38.365867 38.365867 0 0 1-38.229333 38.229333h-378.88a38.365867 38.365867 0 0 1-38.229334-38.229333V550.229333H218.995872v301.738667h349.252267v-55.978667a38.365867 38.365867 0 0 1 38.229333-38.2976h378.88a38.365867 38.365867 0 0 1 38.2976 38.229334v189.2352c0 10.24-4.3008 19.933867-11.332266 26.897066a34.747733 34.747733 0 0 1-26.4192 11.8784z m-38.843733-455.953067V456.021333H645.389472v112.64h301.806934V567.978667z m0 378.88v-112.64H645.389472v112.64h301.806934zM77.410806 236.612267h444.074666V77.073067H77.410806v159.5392z"
                    p-id="8876"
                  ></path>
                </svg>
                {{ Terms.portal.subordinate }}
              </span>
            </p>
        </div>
        <div class="tree" v-else>
          <div v-for="i in TreeDataBySearch" class="topic isSearching">
          <t-radio
            v-model="topicID"
            :val="i[Id]"
              :label="i.Name"
              
              :ref="i[Id].replace(/-/gi, '')"
              size="xs"
              :style="i.relationName?'position: relative;top: -8px':''"
            >
             
            </t-radio>
           
              <p
                v-if="i.relationName"
                style="
                  text-indent: 20px;
                  display: block;
                  margin: 0;
                  padding: 0;
                  line-height: 10px;
                  font-size: 12px;
                  color: rgba(0, 0, 0, 0.56);
                  position: absolute;
    bottom: 6px;
                "
              >
                {{ i.relationName }}
              </p>
            </div>

        </div>
      </div>
      <div style=" display: flex;
            gap: 12px;
            padding: 10px !important;
            align-items: center;
            justify-content: end;
            width: 100%;
            margin: 0;">
        <t-button
            @click="close"
            style="
              color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
              border: 1px solid #dcdcdc;
              padding: 8px 6px;
            "
            >{{ Terms.portal.cancel }}</t-button
          >
          <t-button
            type="primary"
            @click="sureData"
            class="tr-button-primary"
            >{{ Terms.portal.confirm }}</t-button
          >
       
      </div>
    </div>
    
    </t-dialog>
  </div>
</template>

<script>
import { Terms } from './lib/Term';
// import { div } from "devextreme-vue/scroll-view";
import TDialog from 't/basic/dialog';
import TRadioGroup from 't/basic/radio-group'
import TRadio from 't/basic/radio'
import TButton from 't/basic/button'
export default {
  data() {
    return {
      isSearching: false,
      searchInput: '',
      PId: '',
      handelData: [],
      TreeData: [],
      topicID: '',
      breadcrumb: [],
      Terms: Terms,
      TreeDataBySearch: [],
      filterKey:''
    };
  },
  emits: ['update:visible','confirm'],
  props: {
    args: {
      type: Object,
    },
    title: {
      type: String,
      default: Terms.portal.defaultTitle,
    },
    searchPlaceholder: {
      type: String,
      default: Terms.portal.searchPlaceholder,
    },
    isLazy: {
      type: Boolean,
      default: false,
    },
    search: {
      type: Function,
      default: () => {},
    },
    orignId: {
      type: String,
      default: '0',
    },
    pId: {
      type: String,
      default: 'ParentID',
    },
    Id: {
      type: String,
      default: 'TopicID',
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    TDialog,
    TRadioGroup,
    TRadio,
    TButton
  },
  mounted() {
    this.init();
  },
  methods: {
    sureData() {
      if (!this.topicID) {
        //return alert('请选择数据')
      }
      this.close();
      return this.$emit('confirm', this.Mapping[this.topicID]);
    },
    close() {
      this.$emit('update:visible', false);
    },
    clickBreadcrumb(target, index) {
      if (index == this.breadcrumb.length - 1) return;
      this.breadcrumb = this.breadcrumb.slice(0, index + 1);
    },
    nextStep(target) {
      this.breadcrumb.push(target);
      this.TreeData = this.breadcrumb[this.breadcrumb.length - 1];
      this.TreeData = Object.assign(this.TreeData);
    },
    init() {
      let treeData = this.search(
        this.isLazy,
        this.PId ? this.PId : this.orignId,
      );
      if (treeData instanceof Promise) {
        treeData.then(res => {
          this.initTree(res);
        });
      } else {
        this.initTree(treeData);
      }
    },
    initTree(data) {
      let TreeData = this.initTreeData(data);
      
      this.breadcrumb.push({
        Name: this.$q.lang.portal.topic,
        children: TreeData,
      });
      this.TreeData=this.breadcrumb[0]
    },
    initTreeData(data) {
      /**
       * 构造树结构
       */
      this.orginData = JSON.parse(JSON.stringify(data));
      let Mapping = {};
      data.forEach(element => {
        Mapping[element[this.Id]] = element;
      });
      let root = [];
      data.forEach(element => {
        if (element[this.pId] == this.orignId) {
          root.push(Mapping[element[this.Id]]);
        } else {
          if (
            Mapping[element[this.pId]] &&
            !Mapping[element[this.pId]].children
          ) {
            Mapping[element[this.pId]].children = [];
          }
          if (Mapping[element[this.pId]]) {
            Mapping[element[this.pId]].children.push(Mapping[element[this.Id]]);
          }
        }
      });
      this.Mapping = Mapping;
      return root;
    },
    searchByLazy(inputVal) {
      inputVal ? (inputVal = inputVal.trim()) : '';
      let res = [];
      this.orginData.forEach(item => {
        // 某一些参数命中即可
        let isSomeDataHit = false;
        for (let i in item) {
          if (item[i] && item[i].toString().indexOf(inputVal) != -1) {
            item.relationName = this.getRelationName(item);
            if (item.relationName == item.Name) {
              delete item.relationName;
            }
            isSomeDataHit = true;
          }
        }
        if (isSomeDataHit) {
          res.push(item);
        }
      });
      this.TreeDataBySearch = res;
      this.TreeDataBySearch = this.TreeDataBySearch.slice(0);
    },
    // 构造关联名称
    getRelationName(item, Name) {
      if (!Name) {
        if (this.Mapping[item[this.pId]]) {
          Name = ` > ${item.Name}`;
          return this.getRelationName(this.Mapping[item[this.pId]], Name);
        } else {
          Name = `${item.Name}`;
        }
      } else {
        if (this.Mapping[item[this.pId]]) {
          Name = ` > ${item.Name}${Name}`;
          return this.getRelationName(this.Mapping[item[this.pId]], Name);
        } else {
          Name = `${item.Name}${Name}`;
        }
      }

      return Name;
    },
  },
  watch: {
    searchInput: function (val) {
      if (this.searchInput) {
        this.isSearching = true;
        this.handelData = this.searchByLazy(val);
      } else {
        this.isSearching = false;
      }
    },

    breadcrumb: function () {
      this.TreeData = this.breadcrumb[this.breadcrumb.length - 1];
      this.TreeData = Object.assign(this.TreeData);
    },
  },
};
</script>

<style  lang="scss">
.portal_topic {
  .dialog__inner {
    background: #fff;
  }
  .header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;

    .operate {
      font-size: 14px;
      display: flex;
      align-items: center;

      i {
        color: rgba(0, 0, 0, 0.56);
        font-size: 20px;
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }

  .searchs {
    margin: 0px 0 18px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #f0f2f5;
    border-radius: 2px;

    i {
      margin-left: 13px;
      color: rgba(0, 0, 0, 0.32);
    }

    input {
      height: 32px;
      background: #f0f2f5;
      width: calc(100% - 40px);
      border: 0;
      outline: 0;
      text-indent: 10px;
    }
  }

  .line {
    height: 4px;
    margin: 0;
    padding: 0;
    width: 100%;
    background: #f0f2f5;
  }

  .tree {
    height: calc(100vh - 210px);
    overflow: auto;

    .topic {
      width: 100%;
      display: flex;
      padding: 0 20px;
      margin: 0;
      line-height: 48px;
      border-bottom: 1px solid #e8e8e8;
      justify-content: space-between;
      position: relative;
      span {
        float: right;
        color: var(--t-color);
        display: flex;
        align-items: center;

        svg {
          margin-right: 4px;
        }
      }
    }
  }
  .breadcrumb {
    color: var(--t-color);
    cursor: pointer;
  }
  .breadcrumb:hover {
    color: var(--t-color-hover);
    cursor: pointer;
  }
}
</style>


